/* 基础蛇体结构 */
.snake-segment {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  position: absolute;
  transition: all 0.1s;
}

/*======== 皮肤样式 ========*/
/* 经典绿色 */
.skin-default {
  background: #4CAF50;
  box-shadow: 0 0 5px rgba(76,175,80,0.5);
}

/* 霓虹渐变 */
.skin-neon {
  background: linear-gradient(45deg, 
    #ff00ff 0%, 
    #00ffff 50%, 
    #ff00ff 100%);
  background-size: 200% 200%;
  animation: neonFlow 2s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(255,0,255,0.5);
}

/* 动态斑点 */
.skin-spots {
  background: radial-gradient(
    circle at 30% 30%,
    #FFEB3B 15%,
    transparent 16%
  ),
  radial-gradient(
    circle at 70% 60%,
    #FFEB3B 15%,
    transparent 16%
  ),
  radial-gradient(
    circle at 40% 80%,
    #FFEB3B 15%,
    transparent 16%
  ),
  #8BC34A;
  background-size: 200% 200%;
  animation: spotMove 4s linear infinite;
}

/* 金属条纹 */
.skin-metal {
  background: linear-gradient(
    45deg,
    #B0BEC5 0%,
    #ECEFF1 25%,
    #B0BEC5 50%,
    #ECEFF1 75%,
    #B0BEC5 100%
  );
  background-size: 200% 200%;
  animation: metalShine 2s linear infinite;
  box-shadow: 0 0 10px rgba(176,190,197,0.7);
}

/* 半透明幻影 */
.skin-ghost {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 动画效果 */
@keyframes neonFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes spotMove {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes metalShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.skin-option.active {
  border-color: #FFC107;
  box-shadow: 0 0 10px rgba(255,193,7,0.5);
}

/* 动画定义 */
@keyframes neonFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes spotMove {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

.skin-option.active {
  border-color: #FFC107;
  box-shadow: 0 0 10px rgba(255,193,7,0.5);
}

/* 动画定义 */
@keyframes neonFlow {
  0% { background-position: 0% 50% }
  100% { background-position: 200% 50% }
}

@keyframes spotMove {
  from { background-position: 0 0 }
  to { background-position: 100% 100% }
}